JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at the DOM.
Accessing DOM Nodes
We can access DOM nodes with built-in objects in the browser.
The document node gives us access to the current document.
We can see the properties of it with the console.dir method:
console.dir(document);
We can use the nodeType property to get the type of node.
ndoeName has the node’s name.
nodeValue has the value, which is the text for text nodes for example.
The:
document.nodeType;
returns 9.
There’re 12 node types, which are represented by integers.
The most common is 1 for element, 2 attributes, and 3 for text.
document.nodeName
returns '#document' .
And document.nodeValue is null .
documentElement
The document.documentElement property gives us the HTML element.
The nodeType is 1 since it’s an element.
We can see that with:
document.documentElement.nodeType
We can get the nodeName with:
document.documentElement.nodeName
and get the tag name with:
document.documentElement.tagName
They both return 'HTML' .
Child Nodes
We can get child nodes from the document object.
Also, we can check if there’re any child nodes with the hasChildNodes method.
For example, we can write:
document.documentElement.hasChildNodes();
and we get true .
The childNodes property has the length property to get the number of child nodes of a DOM node.
For example, we can write:
document.documentElement.childNodes.length;
And we can get the child nodes by its index:
document.documentElement.childNodes[0];
document.documentElement.childNodes[1];
etc.
To get the parent node, we can use the parentNode property:
document.documentElement.childNodes[1].parentNode;
they all return some element.
In the last example, the HTML element is returned.
For instance, if we have:
<body>
<p class="opener">foo</p>
<p><em>bar</em> </p>
<p id="closer">baz</p>
<!-- the end -->
</body>
Then console.log(document.body.childNodes.length) logs 10 since we have the HTML elements, attribute nodes, text nodes, and comment nodes.
Attributes
We can check whether an element has attributes with the hasAttributes method.
For instance, we can write:
console.log(document.body.childNodes[1].hasAttributes())
then we get true .
If it’s true then the node has attributes.
We can get the attributes with the attributes .
For instance, we can write:
console.log(document.body.childNodes[1].attributes[0].nodeName)
then we get 'class'.
nodeName get the name of the attribute.
We can also use the nodeValue property to get the attribute value.
So we can write:
console.log(document.body.childNodes[1].attributes['class'].nodeValue)
We can also get the attribute with the getAttribute method:
console.log(document.body.childNodes[1].getAttribute('class'))
Accessing the Content Inside a Tag
We can get content inside a tag.
To do that, we can use the textContent property to get the text content inside a tag.
So we can write:
console.log(document.body.childNodes[1].textContent)
then we get 'foo' .
Also, we can get the innerHTML property to get the HTML content in an HTML element node:
console.log(document.body.childNodes[3].innerHTML)
and we get:
<em>bar</em>
Like other elements, we can get the length , nodeName and nodeValue .
For instance, we can write:
console.log(document.body.childNodes[1].childNodes.length)
to get the length of the child nodes and:
console.log(document.body.childNodes[0].nodeName)
which logs ‘#text’ and:
console.log(document.body.childNodes[1].childNodes[0].nodeValue)
and we get 'foo' .
Conclusion
We can use various properties to get DOM nodes and attributes.
